/**
 * 图表页面
 */
import React from 'react';
import ReactEcharts from 'echarts-for-react';
import * as Utils from '../../../common/utils';
import * as ConstData from '../../../common/const';

const cWidth = document.body.clientWidth;
const cHeight = document.body.clientHeight;

class EchartPage extends React.Component {
    constructor(props) {
        super(props);
        
    }

    render() {
        const { title, xName, yName, xData, series, legendData, formatter } = this.props;
        let maxArray = []; 
        for(let i = 0; i < series.length; i++){
            let itemMax = Math.max(...series[i].data);
            maxArray.push(itemMax);
        }
        let maxValue = maxArray.length>0 ? Utils.GetMaxValue(maxArray) : 2;
        let dataValue = series.length>0?series[0].data:[]
        const smLegend = {
            selectedMode: false,
            data: legendData,
            top: 30,
        };
        const lagerLegend = {
            selectedMode: false,
            data: legendData,
            type: 'scroll',
            bottom: 0,
        }
        const legendState = legendData.length>1;

        const option = {
            title: {
                text: title,
                left: 'center',
            },
            toolbox: {
                show: true,
                right: '9.4%',
                feature: {
                    magicType: {type: ['line']},
                    restore: {},
                    saveAsImage: {},
                }
            },
            grid: {
                left: '10%',//因旋转导致名字太长的类目造成遮蔽，可以配合这两个属性
                bottom: legendState ? '15%': '10%'// 分别表示：距离左边距和底部的距离，具体数值按实际情况调整
            },
            color: ['#4aa5d7', '#4fc9e7', '#78e3e2', '#a6e7ba', '#fcd868', '#f99982', 
            '#f36993', '#d95bac', '#e18dcf', '#9e98f1', '#847ae6', '#9bc2fc'],
            legend: legendState?lagerLegend:smLegend,
            tooltip: {
                formatter: formatter?formatter:'',
                trigger: 'axis'
            },
            xAxis: {
                name: xName,
                type: 'category',
                boundaryGap: true, //图形两边留白, false则不留白
                data: xData,
                axisLabel: ConstData.AXIS_LABEL,
                axisTick: {
                    // alignWithLabel: true, //留白后让刻度轴在标签名下
                }
            },
            yAxis: {
                name: yName,
                type: 'value',
                minInterval: 1,
                interval: Utils.GetInterval(maxValue),
                max: (value)=> {
                    return maxValue;
                },
                axisLabel: {
                    showMaxLabel: true
                },
                nameTextStyle: {
                    padding: [0, 0, 10, 0]
                },
                splitLine:{
                    lineStyle:{
                        type:'dashed'
                    }
                }
            },
            series: series,
            dataZoom : legendState?[
                {
                    type: 'slider',
                    show: true,
                    start: 0,
                    end: dataValue.length >= 10 ? 1000/dataValue.length : 100,
                    handleSize: 10,
                    maxSpan:(dataValue.length >= 10 ? 1000/dataValue.length : 100)*1.3,
                    bottom: '5%',
                    fillerColor:'rgba(167,183,204,0.5)',
                    dataBackground:{
                        areaStyle:{
                            color:'rgba(47,69,84,0.1) '
                        }
                    }
                },
                {
                    type: 'inside',
                    start: 0,
                    end: 12,
                }
            ]:ConstData.dataZoom(dataValue)
        }

        return (
            <div>
                <ReactEcharts
                    option={option}
                    style={{height: '700px', width: '100%'}}
                    notMerge={true}
                />
            </div>
        )
    }
}

export default EchartPage;